<template>
  <view class="container">
    <image
      @click="navTo('/pages/ucenter/setting/setting?id=' + userInfo.id)"
      style="
        width: 35rpx;
        height: 34rpx;
        position: fixed;
        right: 32rpx;
        top: 80rpx;
      "
      :src="require('../../static/user-center/setting.png')"
    ></image>
    <view class="user-section">
      <!-- <image class="bg" src="/static/ucenter/user-bg.jpg"></image> -->
      <view class="user-info-box" style="position: relative">
        <view class="portrait-box">
          <image
            class="portrait"
            :src="userInfo.picx || '/static/ucenter/missing-face.png'"
          ></image>
        </view>
        <view class="info-box" style="margin-left: 20upx">
          <view style="display: flex; align-items: center; margin-bottom: 8rpx">
            <text
              class="username"
              @click="navTo('/pages/ucenter/uinfo/uinfo')"
              >{{ userInfo.nichen || userInfo.name || "游客" }}</text
            >
            <image
              v-if="userInfo.vip == '1'"
              src="/static/user-center/vip.png"
              style="height: 34rpx; width: 46rpx; margin-left: 12rpx"
            ></image>
          </view>
          <text
            style="font-size: 22rpx; color: #999999; line-height: 33rpx"
            v-if="userInfo.vip == '1'"
            >会员到期时间：{{ userInfo.viptime }}</text
          >
        </view>
        <!-- <image
          style="width: 20rpx; height: 20rpx; position: absolute; right: 0"
          src="/static/user-center/more.png"
        >
        </image> -->
        <view
          v-if="utoken"
          class="userInfo"
          @click="navTo('/pages/ucenter/uinfo/uinfo')"
        >
          查看我的主页
        </view>
        <!-- <view class="vip" > -->
        <!-- </view> -->
      </view>
      <view class="tj-sction">
        <view class="tj-item">
          <image
            src="/static/user-center/coin.png"
            style="width: 72rpx; height: 72rpx; margin-right: 19rpx"
          ></image>
          <view
            style="display: flex; flex-direction: column; padding-right: 155rpx"
            @click="navTo('/pages/ucenter/coin/coin')"
            class="coin"
          >
            <text
              style="
                font-size: 28rpx;
                font-family: Helvetica;
                color: #130900;
                line-height: 41rpx;
                margin-bottom: 4rpx;
              "
              >金币</text
            >
            <text
              style="
                font-size: 22rpx;
                font-family: Helvetica;
                color: #999999;
                line-height: 30rpx;
              "
              >去充值</text
            >
          </view>
        </view>
        <view
          class="tj-item"
          style="margin-left: 41rpx"
          @click="navTo('/pages/ucenter/ticket/ticket')"
        >
          <image
            src="/static/user-center/ticket.png"
            style="width: 72rpx; height: 72rpx; margin-right: 19rpx"
          ></image>
          <view
            style="display: flex; flex-direction: column"
            @click="navTo('/pages/ucenter/ticket/ticket')"
          >
            <text
              style="
                font-size: 28rpx;
                font-family: Helvetica;
                color: #130900;
                line-height: 41rpx;
                margin-bottom: 4rpx;
              "
              >月票</text
            >
            <text
              style="
                font-size: 22rpx;
                font-family: Helvetica;
                color: #999999;
                line-height: 30rpx;
              "
              >去充值</text
            >
          </view>
        </view>
        <!-- <view class="tj-item" @click="navTo('/pages/ucenter/vip/vip')">
          <text class="num" style="font-size: 18px">{{
            userInfo.vip == 1 ? "已开通" : "未开通"
          }}</text>
          <text>会员</text>
        </view> -->
      </view>
      <view
        style="
          height: 88rpx;
          background: #f0f8f5;
          border-radius: 16rpx;
          border: 1px solid #50cca6;
          padding: 0 24rpx;
          margin-top: 37rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
        @click="navTo('/pages/ucenter/vip/vip')"
      >
        <text
          style="
            font-size: 30rpx;
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: bold;
            color: #50cca6;
            line-height: 45rpx;
            margin-top: -10rpx;
          "
          >VIP会员</text
        >
        <text
          style="
            font-size: 26rpx;
            font-family: Helvetica;
            color: #272727;
            line-height: 37rpx;
          "
        >
          {{ userInfo.vip == "1" ? "您已开通" : "开通VIP，尊享会员权益" }}
          <image
            src="/static/arrow.png"
            style="width: 20rpx; height: 20rpx; margin-left: 10rpx"
          ></image>
        </text>
      </view>
      <!-- <view class="user-tabs">
        <view
          class="user-tabs-item"
          @click="navTo('/pages/ucenter/coin/coin')"
          style="
            margin-left: 4rpx;
            background: linear-gradient(180deg, #f8f4e8 0%, #f9f2d6 100%);
          "
        >
          <image class="img" src="/static/user-center/gold.png"></image>
          <text>充值金币</text>
        </view>
        <view
          class="user-tabs-item"
          style="background: linear-gradient(180deg, #ecf0fb 0%, #e7eafb 100%)"
          @click="navTo('/pages/ucenter/ticket/ticket')"
        >
          <image class="img" src="/static/user-center/ticket.png"></image>
          <text>充值月票</text>
        </view>
        <view
          class="user-tabs-item"
          @click="navTo('/pages/ucenter/vip/vip')"
          style="background: linear-gradient(180deg, #fdeee6 0%, #f5ded1 100%)"
        >
          <image class="img" src="/static/user-center/vip1.png"></image>
          <text>开通会员</text>
        </view>
        <view
          class="user-tabs-item"
          style="
            margin-right: 4rpx;
            background: linear-gradient(180deg, #f4e7ee 0%, #f6dbe4 100%);
          "
          @click="navTo('/pages/ucenter/task/task')"
        >
          <image class="img" src="/static/user-center/task.png"></image>
          <text>任务中心</text>
        </view>
      </view> -->
      <!-- <view class="vip-card-box">
				<image class="card-bg" src="/static/ucenter/vip-card-bg.png" mode="bottom right"></image>
				<view class="b-btn" @click="navTo('/pages/ucenter/vip/vip')">
					{{ userInfo.vip !== '1' ? "立即开通" : "续费会员" }}
				</view>
				<view class="tit">
					<view class="yticon">
						<u-icon size="16" name="integral" color="#f6e5a3"></u-icon>
					</view>
					VIP专属特权
				</view>
				<text class="e-m">{{ userInfo.vip !== '1' ? "开通VIP会员" : "超级VIP用户" }}</text>
				<text class="e-b">{{ userInfo.vip !== '1' ? "享受更多VIP福利&权益" : "欢迎来到我的世界,我尊贵的VIP主人~" }}</text>
			</view> -->
    </view>
    <!-- 明细列表 -->
    <view class="order-section">
      <view
        class="order-item"
        @click="navTo('/pages/ucenter/record/task')"
        hover-class="common-hover"
        :hover-stay-time="50"
      >
        <view style="display: flex; flex-direction: column">
          <text style="font-size: 28rpx; color: #333333; line-height: 40rpx"
            >奖励明细</text
          >
          <text
            style="
              font-size: 22rpx;
              color: #999999;
              line-height: 30rpx;
              margin-top: 9rpx;
            "
            >查看奖励明细</text
          >
        </view>
        <view class="yticon">
          <!-- <u-icon size="26" name="gift" color="#000"></u-icon> -->
          <image
            style="width: 82rpx; height: 82rpx"
            src="/static/user-center/gift.png"
          >
          </image>
        </view>
      </view>
      <view
        class="order-item"
        @click="navTo('/pages/ucenter/record/consume')"
        hover-class="common-hover"
        :hover-stay-time="50"
      >
        <view style="display: flex; flex-direction: column">
          <text style="font-size: 28rpx; color: #333333; line-height: 40rpx"
            >消费明细</text
          >
          <text
            style="
              font-size: 22rpx;
              color: #999999;
              line-height: 30rpx;
              margin-top: 9rpx;
            "
            >查看消费明细</text
          >
        </view>
        <view class="yticon">
          <image
            style="width: 82rpx; height: 82rpx"
            src="/static/user-center/pay.png"
          >
          </image>
        </view>
      </view>
      <view
        class="order-item"
        @click="navTo('/pages/ucenter/record/order')"
        hover-class="common-hover"
        :hover-stay-time="50"
      >
        <view style="display: flex; flex-direction: column">
          <text style="font-size: 28rpx; color: #333333; line-height: 40rpx"
            >订单明细</text
          >
          <text
            style="
              font-size: 22rpx;
              color: #999999;
              line-height: 30rpx;
              margin-top: 9rpx;
            "
            >查看订单明细</text
          >
        </view>
        <view class="yticon">
          <image
            style="width: 82rpx; height: 82rpx"
            src="/static/user-center/order.png"
          >
          </image>
        </view>
      </view>
      <view
        class="order-item"
        @click="navTo('/pages/ucenter/task/task')"
        hover-class="common-hover"
        :hover-stay-time="50"
      >
        <view style="display: flex; flex-direction: column">
          <text style="font-size: 28rpx; color: #333333; line-height: 40rpx"
            >任务中心</text
          >
          <text
            style="
              font-size: 22rpx;
              color: #999999;
              line-height: 30rpx;
              margin-top: 9rpx;
            "
            >签到领取金币</text
          >
        </view>
        <view class="yticon">
          <image
            style="width: 82rpx; height: 82rpx"
            src="/static/user-center/task.png"
          >
          </image>
        </view>
      </view>
      <!-- <view
        class="order-item"
        @click="navTo('/pages/ucenter/kami/kami')"
        hover-class="common-hover"
        :hover-stay-time="50"
      >
        <view class="yticon">
          <image
            style="width: 82rpx; height: 82rpx"
            src="/static/user-center/card.png"
          >
          </image>
        </view>
        <text>卡密兑换</text>
      </view> -->
      <!-- <view class="order-item" @click="navTo('/pages/order/order?state=4')" hover-class="common-hover"  :hover-stay-time="50">
					<text class="yticon icon-shouhoutuikuan"></text>
					<text>充值中心</text>
				</view> -->
    </view>
    <view
      class="cover-container"
      :style="[
        {
          transform: coverTransform,
          transition: coverTransition,
        },
      ]"
      @touchstart="coverTouchstart"
      @touchmove="coverTouchmove"
      @touchend="coverTouchend"
    >
      <!-- <image class="arc" src="/static/ucenter/arc.png"></image> -->

      <!-- <view class="tj-sction">
				<view class="tj-item" @click="navTo('/pages/ucenter/coin/coin')">
					<text class="num">{{ userInfo.cion || 0 }}</text>
					<text>{{ userInfo.cion_name || "金币" }}</text>
				</view>
				<view class="tj-item" @click="navTo('/pages/ucenter/ticket/ticket')">
					<text class="num">{{ userInfo.ticket || 0 }}</text>
					<text>月票</text>
				</view>
				<view class="tj-item" @click="navTo('/pages/ucenter/vip/vip')">
					<text v-if="userInfo.vip == 1" class="num">{{ userInfo.vipday }}</text>
					<text v-else class="num">未开通</text>
					<text>会员</text>
				</view>
			</view> -->

      <!-- 列表 -->
      <view
        class="history-section icon"
        :style="{
          marginBottom: utoken ? '0' : '20rpx',
        }"
      >
        <!-- <list-cell :icon="require('../../static/user-center/history.png')" iconSize="20px" iconColor="#d4237a"
					title="卡密兑换" tips="" @eventClick="navTo('/pages/ucenter/kami/kami')"></list-cell> -->
        <list-cell
          iconSize="22px"
          iconColor="#5fcda2"
          title="阅读记录"
          tips=""
          @eventClick="navGo('/pages/ucenter/history/history')"
        ></list-cell>
        <list-cell
          title="我的评论"
          tips=""
          @eventClick="navTo('/pages/ucenter/comment/comment')"
        ></list-cell>
        <!-- <list-cell
          title="卡密兑换"
          tips=""
          @eventClick="navTo('/pages/ucenter/kami/kami')"
        ></list-cell> -->
        <!-- <list-cell
          title="账号设置"
          tips=""
          @eventClick="
            navTo('/pages/ucenter/setting/setting?id=' + userInfo.id)
          "
        ></list-cell> -->
        <list-cell
          title="青少年模式"
          tips=""
          @eventClick="navGo(`/pages/ucenter/teenager/index`, '青少年')"
        ></list-cell>
        <list-cell
          title="身份认证"
          tips=""
          @eventClick="navGo('/pages/ucenter/verify/index')"
        ></list-cell>
        <list-cell
          title="关于我们"
          tips=""
          @eventClick="navGo('/pages/privacy/index?key=about_private')"
        ></list-cell>
        <!-- <list-cell icon="" iconColor="#54b4ef" title="我的收藏"></list-cell> -->
      </view>
    </view>
    <view
      class="history-section icon"
      v-if="utoken !== ''"
      style="margin: 20rpx 24rpx"
    >
      <list-cell
        :icon="require('../../static/user-center/logout.png')"
        iconSize="20px"
        iconColor="#5fcda2"
        title="退出登录"
        tips=""
        @eventClick="logout()"
      ></list-cell>
    </view>
    <u-modal
      :show="modal_show"
      :title="modal_title"
      :content="modal_content"
      confirmColor="#FFD74B"
      @cancel="cancel"
      @confirm="confirm"
      asyncClose
      showCancelButton
    ></u-modal>
  </view>
</template>
<script>
import listCell from "@/components/mix-list-cell";
import w_md5 from "../../js_sdk/zww-md5/w_md5.js";
import avatar from "../../static/user-center/avatar.png";
import { mapState } from "vuex";
let startY = 0,
  moveY = 0,
  pageAtTop = true;
export default {
  components: {
    listCell,
    w_md5,
  },
  data() {
    return {
      coverTransform: "translateY(0px)",
      coverTransition: "0s",
      moving: false,
      userInfo: { vip: "1", picx: avatar },
      utoken: "",
      modal_show: false,
      modal_title: "温馨提示",
      modal_content: "是否确认退出？",
      version: 0,
    };
  },
  onLoad() {},
  // #ifndef MP
  onNavigationBarButtonTap(e) {
    const index = e.index;
    if (index === 0) {
      this.navTo("/pages/set/set");
    } else if (index === 1) {
      // #ifdef APP-PLUS
      const pages = getCurrentPages();
      const page = pages[pages.length - 1];
      const currentWebview = page.$getAppWebview();
      currentWebview.hideTitleNViewButtonRedDot({
        index,
      });
      // #endif
      uni.navigateTo({
        url: "/pages/notice/notice",
      });
    }
  },
  onShow() {
    this.utoken = uni.getStorageSync("user");
    // #ifdef APP-PLUS
    // 获取手机系统信息
    var _this = this;
    uni.getSystemInfo({
      success: function (res) {
        _this.platform = res.platform; //ios  or android
        console.log("手机系统信息", _this.platform);
      },
    });
    // 获取版本号
    plus.runtime.getProperty(plus.runtime.appid, function (inf) {
      _this.version = inf.version;
    });
    console.log("当前版本", this.version);
    // #endif
    this.get_userinfo();
    this.get_update();
  },
  // #endif
  methods: {
    logout() {
      this.modal_show = true;
    },
    confirm() {
      this.logout_ok();
    },
    cancel() {
      this.modal_show = false;
    },
    logout_ok() {
      this.modal_show = false;
      getApp().globalData.uid = "";
      getApp().globalData.utoken = "";
      this.utoken = "";
      uni.removeStorageSync("user");
      uni.removeStorageSync("teenData");
      console.log("退出登录: ", uni.getStorageSync("user"));
      this.get_userinfo();
    },
    get_userinfo() {
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;

      var param =
        "deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&timestamp=" +
        time +
        "&user_id=" +
        uni.getStorageSync("user").uid +
        "&user_token=" +
        uni.getStorageSync("user").utoken;

      var sign = w_md5.hex_md5_32Upper(param + this.app_key);
      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/user/index?" +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          console.log("用户信息：", res.data);
          this.userInfo = res.data.user;
          const { teen_pass, teen_status } = this.userInfo;
          uni.setStorageSync(
            "teenData",
            JSON.stringify({
              teen_pass,
              teen_status,
            })
          );
        },
      });
    },
    /**
     * 统一跳转接口,拦截未登录路由
     * navigator标签现在默认没有转场动画，所以用view
     */
    navTo(url) {
      if (this.utoken == "") {
        url = "/pages/login/login";
      }
      uni.navigateTo({
        url,
      });
    },
    /**
     * 统一跳转接口,不拦截登录路由
     * navigator标签现在默认没有转场动画，所以用view
     */
    navGo(url, label) {
      if (label && this.userInfo.nichen === "立即登录") {
        return uni.navigateTo({
          url: "/pages/login/login",
        });
      }
      uni.navigateTo({
        url,
      });
    },

    /**
     *  会员卡下拉和回弹
     *  1.关闭bounce避免ios端下拉冲突
     *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
     *    transition设置0.1秒延迟，让css来过渡这段空窗期
     *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
     */
    coverTouchstart(e) {
      if (pageAtTop === false) {
        return;
      }
      this.coverTransition = "transform .1s linear";
      startY = e.touches[0].clientY;
    },
    coverTouchmove(e) {
      moveY = e.touches[0].clientY;
      let moveDistance = moveY - startY;
      if (moveDistance < 0) {
        this.moving = false;
        return;
      }
      this.moving = true;
      if (moveDistance >= 80 && moveDistance < 100) {
        moveDistance = 80;
      }

      if (moveDistance > 0 && moveDistance <= 80) {
        this.coverTransform = `translateY(${moveDistance}px)`;
      }
    },
    coverTouchend() {
      if (this.moving === false) {
        return;
      }
      this.moving = false;
      this.coverTransition = "transform 0.3s cubic-bezier(.21,1.93,.53,.64)";
      this.coverTransform = "translateY(0px)";
    },
  },
};
</script>
<style lang="scss">
page {
  background: #f0f8f5;
}

%flex-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

%section {
  display: flex;
  justify-content: space-around;
  align-content: center;
  background: #fff;
  border-radius: 10upx;
}

.user-section {
  position: relative;
  margin: 173rpx 24rpx 0 24rpx;
  padding: 0 24rpx 30rpx 24rpx;
  border-radius: 16rpx;
  background-color: #fff;
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 300rpx;
    display: flex;

    // filter: blur(1px);
    // opacity: .7;
    &-left {
      width: 443rpx;
      height: 100%;
      background: #d5f6ff;
      opacity: 0.64;
      filter: blur(50rpx);
    }

    &-right {
      width: 383rpx;
      height: 100%;
      background: #fcf1ff;
      opacity: 0.64;
      filter: blur(50rpx);
    }
  }
}

.user-info-box {
  display: flex;
  align-items: center;
  position: relative;
  height: 120rpx;
  margin-bottom: 36rpx;
  .portrait {
    width: 120upx;
    height: 120upx;
    border: 5upx solid #fff;
    border-radius: 50%;
  }
  .username {
    font-size: 32upx;
    color: #303133;
    line-height: 47rpx;
  }
  .vip {
    height: 32rpx;
    width: 32rpx;
    margin-left: 2px;
    margin-right: auto;
  }
}

.vip-card-box {
  display: flex;
  flex-direction: column;
  color: #f7d680;
  height: 240upx;
  background: linear-gradient(
    to left top,
    rgba(0, 0, 0, 0.7),
    rgba(0, 0, 0, 0.8)
  );
  border-radius: 16upx 16upx 0 0;
  overflow: hidden;
  position: relative;
  padding: 20upx 24upx;

  .card-bg {
    position: absolute;
    top: 20upx;
    right: 0;
    width: 380upx;
    height: 260upx;
  }

  .b-btn {
    position: absolute;
    right: 20upx;
    top: 16upx;
    width: 132upx;
    height: 40upx;
    text-align: center;
    line-height: 40upx;
    font-size: 22upx;
    color: #36343c;
    border-radius: 20px;
    background: linear-gradient(to left top, #f9e6af, #ffd465);
    z-index: 1;
  }

  .tit {
    font-size: 28upx+2upx;
    color: #f7d680;
    margin-bottom: 28upx;
    display: flex;

    .yticon {
      color: #f6e5a3;
      margin-right: 16upx;
      margin-top: auto;
      margin-bottom: auto;
    }
  }

  .e-b {
    font-size: 24upx;
    color: #d8cba9;
    margin-top: 10upx;
  }
}

.cover-container {
  // background: #f8f8f8;
  // margin-top: -250upx;
  // padding: 0 30upx;
  position: relative;
  background: #fff;
  margin: 0 24rpx;
  border-radius: 18rpx;
  // padding-bottom: 20upx;

  border-radius: 18rpx;

  .arc {
    position: absolute;
    left: 0;
    top: -34upx;
    width: 100%;
    height: 36upx;
  }
}

.tj-sction {
  display: flex;
  .tj-item {
    display: flex;
    font-size: 24upx;
    color: #75787d;
  }

  .num {
    color: #303133;
    font-size: 46rpx;
    font-weight: bold;
    color: #000000;
    line-height: 68rpx;
  }
}

.user-tabs {
  display: flex;
  font-size: 26rpx;
  font-weight: 500;
  color: #000000;
  line-height: 38rpx;
  justify-content: space-between;
  margin-top: 56rpx;

  &-item {
    width: 153rpx;
    height: 190rpx;
    // background: linear-gradient(180deg, #F8F4E8 0%, #F9F2D6 100%);
    border-radius: 16rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .img {
      width: 64rpx;
      height: 64rpx;
      margin-bottom: 19rpx;
    }
  }
}

.order-section {
  // @extend %section;
  // padding: 28upx 0;
  margin: 0 24rpx;
  margin-top: 20upx;
  border-radius: 18rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .order-item {
    width: calc(340upx - 64rpx);
    height: 140upx;
    border-radius: 16upx;
    font-size: 24upx;
    background-color: #fefefe;
    color: #303133;
    display: flex;
    align-items: center;
    padding: 0 40rpx 0 24rpx;
    justify-content: space-between;
  }
  .order-item:nth-child(n + 3) {
    margin-top: 20rpx;
  }
  .yticon {
    font-size: 48upx;
    // margin-bottom: 12upx;
    color: #fa436a;
  }

  .icon-shouhoutuikuan {
    font-size: 44upx;
  }
}

.history-section {
  padding: 0upx 0 0;
  margin-top: 20upx;
  background: #fff;
  border-radius: 10upx;
}
.userInfo {
  font-size: 20rpx;
  font-family: Helvetica;
  color: #50cca6;
  line-height: 28rpx;
  padding: 6rpx 16rpx;
  background: #f0f8f5;
  border-radius: 20rpx;
  border: 1px solid #50cca6;
  position: absolute;
  right: 24rpx;
  top: 33rpx;
}
.coin {
  position: relative;
  &::after {
    position: absolute;
    width: 1px;
    height: 58rpx;
    background-color: #e4ddce;
    right: 0;
    content: "";
    top: 6rpx;
  }
}
</style>
